<template>
  <BasicLayout>
    <template #wrapper>
      <table-pagination
        class="table"
        :loading="loading"
        :columns="columns"
        :max-height="tableHeight"
        :data="tableData"
        :pagination-show="false"
        border
      >
        <template slot="undoneCityQuantity" slot-scope="scope">
          <span v-if="scope.item.state===128">{{ scope.item.undoneCityQuantity }}</span>
          <el-link v-else type="primary" :underline="false" @click="handleShow(scope.item)">{{ scope.item.undoneCityQuantity }}</el-link>
        </template>
        <template slot="operate" slot-scope="scope">
          <span v-for="button in scope.item.newOpreateOptions" :key="button.name">
            <el-link
              v-if="!button.textLoading"
              type="primary"
              :underline="false"
              :style="{'margin-left': '10px'}"
              @click="button.handleEvent?button.handleEvent(scope.item,button.name):''"
            >
              {{ button.name }}
            </el-link>
          </span>
        </template>
      </table-pagination>
      <table-dialog title="未完成城市列表" :columns="[{ prop: 'name', label: '城市名称' }]" :data="undoneCitiesData" :visible="dialogTableVisible" @close="dialogTableVisible=false" />
    </template>
  </BasicLayout>
</template>
<script>
import TablePagination from '@/components/common/TablePagination';
import TableDialog from '../tableDialog';
import { getEliChecklist } from '@/api/replacementApi';
import config from './config';

export default {
  name: 'Region',
  components: {
    TablePagination,
    TableDialog
  },
  data() {
    return {
      columns: config.columns,
      tableData: [],
      opreateOptions: [
        { name: '开始审批', handleEvent: this.handleView, show: [64] },
        { name: '查看报表', handleEvent: this.handleView, show: [128] }
      ],
      state: [
        { name: '待大区长审批', state: 64 },
        { name: '待城市长审批', state: 32 },
        { name: '待运营开始', state: 8 },
        { name: '完成', state: 128 }
      ],
      loading: false,
      dialogTableVisible: false,
      undoneCitiesData: []
    };
  },
  inject: ['getTableHeight', 'getSearchPanel', 'countTableHeght'],
  computed: {
    tableHeight() {
      return this.getTableHeight();
    },
    searchPanel() {
      return this.getSearchPanel();
    }
  },
  watch: {
    searchPanel: {
      deep: true,
      handler() {
        this.$nextTick(() => this.countTableHeght(0));
      }
    }
  },
  mounted() {
    this.$nextTick(() => this.countTableHeght(0));
    this.onGetEliChecklist();
  },
  methods: {
    // 获取大区汰换清单列表信息
    onGetEliChecklist() {
      this.loading = true;
      getEliChecklist({
        eliReportMode: 'REGION'
      }).then(({ data }) => {
        this.loading = false;
        this.tableData = data;
        this.tableData = this.tableData.map(item => {
          // 处理操作栏显示
          const newOpreateOptions = this.opreateOptions.filter(i => i.show.indexOf(item.state) > -1);
          // 处理状态显示
          const newStatus = this.state.filter(i => item.state === i.state);
          // 处理月份显示
          const dateString = new Date(item.date);
          item.month = `${dateString.getFullYear()}年${dateString.getMonth() + 1}月`;
          item.newOpreateOptions = newOpreateOptions;
          item.status = newStatus[0].name;
          return item;
        });
      }).catch(() => {
        this.loading = false;
      });
    },
    // 弹窗展示未完成城市列表信息
    handleShow(item) {
      this.dialogTableVisible = true;
      this.undoneCitiesData = item.undoneCities.map(item => { return { name: item }; });
    },
    // 开始审批
    handleView(item) {
      const paramsObj = {
        date: item.date,
        id: item.region,
        state: item.state
      };
      this.$router.push({ name: 'eliminatedRegionDetail', params: { params: this.CryptoJS.AES.encrypt(JSON.stringify(paramsObj), 'paramsObj').toString() }});
    }
  }
};
</script>

<style lang="scss" scoped>
.table{
  margin: 20px 0;
  ::v-deep .el-link--inner{
    position: relative;
    .text{
      color: rgba(64, 158, 255, 0.2);
    }
    .el-icon-loading{
      position: absolute;
      top: 4px;
      left: 50%;
      margin-left: -9px;
    }
    .el-progress{
      position: absolute;
      top: 2px;
      left: 0;
      width: 100%;

    }
  }
}
</style>
